<template>
  <el-container class="admin-layout">
    <!-- 左侧菜单 -->
    <el-aside width="200px" class="sidebar-container">
      <Sidebar />
    </el-aside>

    <!-- 右侧容器 -->
    <el-container class="right-container">
      <!-- 头部 -->
      <el-header height="60px" class="header-container">
        <Header />
      </el-header>

      <!-- 主体内容 -->
      <el-main>
  <router-view />
</el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Sidebar from '@/components/Admin/AdminSidebar.vue'
import Header from '@/components/Admin/AdminHeader.vue'
</script>

<style scoped>
.admin-layout {
  height: 100vh;
  display: flex;
}

.sidebar-container {
  background-color: #2a2d3e;
  color: #fff;
  transition: all 0.3s ease;
}

.header-container {
  background-color: #409eff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.main-content {
  padding: 24px;
  background-color: #f8f9fa;
  overflow-y: auto;
  min-height: calc(100vh - 60px);
}

.placeholder-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #888;
  font-size: 16px;
}
</style>